<template>
  <div class="box">
    <div class="head">
      <van-icon class="arrow-left" name="arrow-left" @click="goBack" /> 登录
    </div>
    <div class="ipt">
      <van-field
        v-model="tel" type="text"
        placeholder="手机号/用户名/邮箱"
        class="username"
      />
      <van-field
        v-model="password"
        :type="type"
        placeholder="请输入密码"
        class="password"
        :right-icon="typeIcon"
        @click-right-icon="changeIcon(typeIcon)"
      />
    </div>
    <van-button
      class="btn"
      @click="loginCheck"
      color="linear-gradient(to right, #ff6034, #ee0a24)"
    >
      登录
    </van-button>
    <p class="goreg" @click="goReg">手机快速注册</p>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  name: "Login",
  data() {
    return {
      tel:'',
      password: "",
      typeIcon: 'closed-eye',
      type:'password'
    };
  },

  // components: {},
  methods: {
    goReg() {
      this.$router.push("/Reg");
      // this.$router.replace("/Reg");
    },
    changeIcon(value) {
      if (value == 'closed-eye') {
        this.type = "text";
        this.typeIcon="eye-o"
      } else {
        this.type = "password";
        this.typeIcon="closed-eye"
      }
    },
    goBack() {
      this.$router.replace("/");
    },
    loginCheck() {
      this.$service({
        method: "post",
        url: "/api/user/login",
        data: `loginname=${this.tel}&password=${this.password}`,
      }).then((res) => {
        if (res.data.code == 200) {
          Toast("登录成功！");
          // sessionStorage.setItem("username", this.tel);
          sessionStorage.setItem("token", res.data.data.token);
          sessionStorage.setItem("userid", res.data.data.userid);
          if (this.$route.query.path) {
            this.$router.push(this.$route.query.path);
          } else {
            this.$router.push("/My");
          }
        } else {
          Toast("登录失败，用户名或者密码错误！");
        }
      });
    },
  },
};
</script>
<style scoped>
.box {
  width: 100%;
}
.head {
  position: relative;
  height: 3rem;
  background-color: antiquewhite;
  text-align: center;
  line-height: 3rem;
}
.arrow-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.ipt {
  width: 20rem;
  height: 6rem;
  margin: 2rem auto;
}
.btn {
  margin: 0 auto;
  width: 80%;
  display: block;
  border-radius: 5rem;
}
.goreg {
  text-align: right;
  margin: 1rem;
  font-size: 0.7rem;
  color: blue;
}
.goreg:active {
  color: rgb(255, 77, 0);
}
</style>